<template>
  <div class="page-header">
    <div class="top">
      <a @click="$router.push({ path: '/' })" class="logo">
        <img width="100%" height="100%" src="../../assets/logo.png" alt="" />
      </a>
      <search />
      <div class="car" @click="toCartPage">
        <div class="num">
          <icon name="icongouwuche" size="20" />
          <span v-if="cartlist && cartlist.length">{{
            cartGoodsNum >= 100 ? "99+" : cartGoodsNum
          }}</span>
        </div>
        购物车
      </div>
    </div>
    <div class="nav">
      <category />
      <div
        class="nav-item"
        @click="goToPage(nav.name)"
        :class="{ active: nav.name === routeName }"
        v-for="nav in navList"
        :key="nav.title"
      >
        {{ nav.title }}
      </div>
    </div>
  </div>
</template>

<script>
import search from "./Search";
import category from "./Category";
import { mapState } from "vuex";

export default {
  components: {
    search,
    category,
  },
  data() {
    return {
      navList: [
        { title: "首页", name: "Home" },
        { title: "限时秒杀", name: "ActionSpike" },
        { title: "特价区", name: "ActionLowprice" },
        { title: "品牌街", name: "ActionBrand" },
        { title: "店铺街", name: "ShopStreet" },
        { title: "推荐区", name: "GoodsRecommend" },
        // { title: "专区", name: "" },
        // { title: "活动区", name: "ActionPage" },
        // { title: "品牌区", name: "ActionBrand" },
        // { title: "推荐区", name: "GoodsRecommend" },
        // { title: "猜你喜欢", name: "" },
      ],
    };
  },
  computed: {
    ...mapState("car", ["cartlist"]),
    cartGoodsNum() {
      let num = 0;
      this.cartlist.forEach((item) => {
        num += item.good.length;
      });
      return num;
    },
    routeName() {
      return this.$route.name;
    },
  },
  created() {},
  methods: {
    goToPage(name) {
      if (name) {
        this.$router.push({ name: name });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-header {
  background: #fff;
  height: 158px;
  .top {
    max-width: 1200px;
    padding: 30px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .logo {
      cursor: pointer;
      display: inline-block;
      // background: red;
      width: 172px;
      height: 62px;
      // float: left;
    }
    .car {
      // float: right;
      width: 105px;
      margin-left: 67px;
      height: 30px;
      background: #d52c1a;
      border-radius: 15px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      .num {
        position: relative;
        margin-right: 12px;
        display: inline-block;
        span {
          position: absolute;
          top: 2px;
          left: 50%;
          display: inline-block;
          background: #fff;
          color: #d52c1a;
          font-size: 10px;
          height: 12px;
          text-align: center;
          line-height: 12px;
          border-radius: 50px;
          padding: 0 3px;
          border: 1px solid #d52c1a;
        }
      }
    }
  }
  .nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 35px;
    font-size: 16px;
    color: #333;
    .nav-item {
      width: 120px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &.active {
        color: #d52c1a;
      }
    }
  }
}
</style>
